Week2 課程

課程重點

• 物件、this
• import、export
• 非同步 Promise

物件、this

在製作網頁過程，會像圖示一樣，希望每個檔案程式量不超過兩百行，可能會拆解很多部分，一部分也會用模組化使用，拆解部分當作物件來使用並進行封裝，封裝內就會使用大量的 this。

課程範例 1

var a = '全域';
function fn(b) {
  console.log(this === window);
}
fn('a', 1, 2, 3);

• this 一開始為全域，並且指向 window。
• fn(b) 會是 'a'，因為只有一個參數，所以會指向第一個值。

課程範例 2 物件

• 在物件下呼叫函數，這是最常見 this 的用法。
• 如果是傳統函式，只看呼叫前面那個物件 ( 不看函式如何定義 )。
• 箭頭函式 => 看函式如何定義，且不會有自己的 this 。

var myName = '全域'
var obj = {  // this 目前指向的位置
  myName: '小明',
  fn: function () {
    console.log(this.myName);
  }
}
obj.fn();
// 輸出結果 : 小明

var myName = '全域'
function fn() {
  console.log(this, this.myName);
}

 var obj = {  // this 目前指向的位置
  myName: '小明',
  fn: fn
}

obj.fn();
// 輸出結果 : 小明

var myName = '全域'
function fn() {
  console.log(this, this.myName);
}
var obj = {
  myName: '小明',
  inner: {    // this 目前指向的位置
    myName: '小明家',
    fn: fn
  }
}

obj.inner.fn()  
// 輸出結果 : 小明家

var myName = '全域'
function fn() {
  console.log(this, this.myName);
}
;(function(){  // 立即函式內也是看呼叫前方有無物件
   fn()   // 無物件回到最外層
})();

obj.inner.fn()  
// 輸出結果 : 全域

• callback -> simple call 直接呼叫一個函式就叫 simple call 。
• simple call 裡的 this，都是指向 Global 全域。
• 有時立即函式會報錯，也有可能缺少分號 ; ，在前方加上分號；即可。
• 立即函式前面要加 ; --> 可搜尋 ASI JS
  • 自動插入分號

var myName = '全域'
function fn() {
  console.log(this, this.myName);
}
var obj = {
  myName: '小明',
  inner: {   
    myName: '小明家',
    fn１: function () {
        fn()  // 外層定義的 fn -> simple call -> 前無物件所以指向全域
    }
  }
}

obj.inner.fn1()  
// 輸出結果 : 全域

var myName = '全域'
function fn() {
  console.log(this, this.myName);
}
var obj = {
  myName: '小明',
  inner: {   // this 目前指向的位置
    myName: '小明家',
    fn１: function () {  
        console.log(this, this.myName); 
    }
  }
}

obj.inner.fn1()  
// 輸出結果 : 小明家

```javascript
var myName = '全域'
function fn() {
  console.log(this, this.myName);
}
var obj = {
  myName: '小明',
  inner: {   
    myName: '小明家',
    fn１: function () {  
        setTimeout(function() {  //  callback -> simple call -> 前無物件所以指向全域
            console.log(this, this.myName);
        });
    }
  }
}

obj.inner.fn1()  
// 輸出結果 : 全域

// 箭頭函式
var myName = '全域'
function fn() {
  console.log(this, this.myName);
}
var obj = {
  myName: '小明',
  inner: {   
    myName: '小明家',
    fn１: function () {  
        console.log(this, this.myName);
        
        (() => {   // 箭頭函式看目前作用域，跟著外層的
            console.log(this, this.myName);
        })();
    }
  }
}

obj.inner.fn1()  
// 輸出結果 : 小明家 小明家

var myName = '全域'
function fn() {
  console.log(this, this.myName);
}
var obj = {
  myName: '小明',
  inner: {   
    myName: '小明家',
    fn１: function () {  
        console.log(this, this.myName); // 輸出結果 : 小明家
        
        (function() {   
            console.log(this, this.myName); // 輸出結果 :全域
        })();
    }
  }
}

obj.inner.fn1()  


// 物件下需要使用 this，直接在最前面做定義，可用 vm

var obj = {
  myName: '小明',
  inner: {   
    myName: '小明家',
    fn１: function () {  
        console.log(this, this.myName); // 輸出結果 : 小明家
        var vm = this; // 物件下需要使用 this，直接在最前面做定義
        (function() {   
            console.log(vm.myName);  // 輸出結果 : 小明家
            console.log(vm, this, vm === this);
            console.log(obj === this, obj === vm)
        })();
    }
  }
}
obj.inner.fn1() 
// 輸出結果 : 小明家 小明家  兩者一致